<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>hello</title>
</head>
<body>
	<!-- 准备好容器 -->
	<div id="test1"></div>

	<!-- 引入react核心库，引入后全局多了一个React对象 -->
	<script src="../lib/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作dom，引入后全局多了一个ReactDOM对象 -->
	<script src="../lib/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script src="../lib/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制，引入后全局多了一个PropTypes对象 -->
  <script src="../lib/prop-types.js"></script>

	<script type="text/babel">
    // 父组件
    class A extends React.Component {
      state = {
        wearther: '晴天'
      }

      changeCar = () => {
        this.setState({
          wearther: this.state.wearther==='晴天' ? '雨天' : '晴天'
        })
      }

      render() {
        return (
          <div>
            <div>A</div>
            <button onClick={this.changeCar}>修改天气</button>
            <B wearther={this.state.wearther}/>
          </div>
        )
      }
    }

    // 子组件
    class B extends React.Component {
      // 组件将要接收新的props的钩子，注意：初始化传入的时候不会执行
      componentWillReceiveProps(props) {
        console.log('B --- componentWillReceiveProps', props);
      }

      // 控制组件更新的阀门，如果不写，默认返回true
      shouldComponentUpdate(nextProps, nextState) {
        console.log('B --- shouldComponentUpdate');
        // return false; // 阀门关闭，组件不更新
        return true; // 阀门打开，组件更新
      }

      // 组件将要更新的钩子
      componentWillUpdate() {
        console.log('B --- componentWillUpdate');
      }

      // 组件更新完毕的钩子
      componentDidUpdate() {
        console.log('B --- componentDidUpdate');
      }

      render() {
        return <div>我是组件B，今天的天气是：{this.props.wearther}</div>
      }
    }

		// 2.渲染虚拟DOM到页面
		ReactDOM.render(<A/>, document.getElementById('test1'));
	</script>
</body>
</html>